<template>
  <el-drawer title="任务日志" v-model="visible" size="70%" destroy-on-close>
    <SailorTable ref="tableRef" row-key="uuid" :apiObj="Apis.api_task_log.list" :params="{taskUuid: task_uuid}" stripe>
      <el-table-column label="任务名称" prop="taskName" width="200" align="center"></el-table-column>
      <el-table-column label="开始时间" prop="taskStartTime" width="200" align="center"></el-table-column>
      <el-table-column label="结束时间" prop="taskEndTime" width="200" align="center"></el-table-column>
      <el-table-column label="执行耗时" prop="taskTotalTime" width="200" align="center">
        <template #default="scope">
          {{ scope.row.taskTotalTime }} 秒
        </template>
      </el-table-column>
      <el-table-column label="任务状态" prop="taskStatus" width="100" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.taskStatus === 10" type="info">正在运行</el-tag>
          <el-tag v-else-if="scope.row.taskStatus === 2" type="success">运行成功</el-tag>
          <el-tag v-else-if="scope.row.taskStatus === 3" type="warning">取消运行</el-tag>
          <el-tag v-else-if="scope.row.taskStatus === 0" type="danger">运行失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" min-width="80">
        <template #default="scope">
          <el-button-group>
            <el-button size="small" @click="showLogInfo(scope.row)" type="text">日志</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row)">
              <template #reference>
                <el-button v-auth="'task:del'" :loading="delLoading" text type="danger" size="small">
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </el-button-group>
        </template>
      </el-table-column>
    </SailorTable>
  </el-drawer>

  <el-drawer title="日志" v-model="logsVisible" :size="500" direction="rtl" destroy-on-close>
    <el-main style="padding:0 20px 20px 20px;">
      <pre
          style="font-size: 12px;color: #999;padding:20px;background: #333;font-family: consolas;line-height: 1.5;overflow: auto;">{{
          demoLog
        }}</pre>
    </el-main>
  </el-drawer>
</template>

<script setup>
import {ref, watch} from "vue";
import SailorTable from "@/components/SailorTable/index.vue";
import Apis from '@/api'

let logsVisible = ref(false)
let visible = ref(false)

let task_uuid = ref("")

let demoLog = ref(``)

let tableRef = ref()

watch(() => task_uuid, (val) => {
  tableRef.value.refresh()
})

const showLogInfo = (row) => {
  demoLog.value = row.taskResult
  logsVisible.value = true
}

// 方法
const show = (uuid) => {
  task_uuid.value = uuid
  visible.value = true;
}

defineExpose({
  show
})
</script>

<style>
</style>